<template>
    <div>
        <div style="margin-top: 30px;padding: 0px 20px">
            <a-table
                    rowKey="id"
                    :pagination="false"
                    size="middle" :columns="columns" :data-source="tableData" :scroll="{ x: 800, y: 500 }">


                <span slot="status" slot-scope="text, record">
                                    <a-tag :color="record.enabled===1?'green':record.enabled===0?'red':''">
                                          {{record.enabled===1?'开启':'停止'}}
                                    </a-tag>
                </span>
                <span slot="by" slot-scope="text, record">
                                    <a-tag :color="record.by===1?'blue':record.by===0?'green':''">
                                          {{record.by===1?'手动创建':'定时任务创建'}}
                                    </a-tag>
                </span>
                <span slot="startTime" slot-scope="text, record">
                            <span>    {{moment(record.startTime).format("YYYY-MM-DD HH:mm")}}</span>
            </span>
                <span slot="endTime" slot-scope="text, record">
                            <span>    {{moment(record.endTime).format("YYYY-MM-DD HH:mm")}}</span>
            </span>
                <span slot="createTime" slot-scope="text, record">
                            <span>    {{moment(record.createTime).format("YYYY-MM-DD HH:mm")}}</span>
            </span>
                <span slot="updateTime" slot-scope="text, record">
                <span>    {{record.updateTime?moment(record.updateTime).format("YYYY-MM-DD HH:mm"):"-------"}}</span>
            </span>
                <div slot="count" slot-scope="text,record">
                    {{record.maxCount-record.usedCount}}
                </div>

                <div slot="action" slot-scope="text,record">


                    <a v-if="((record.maxCount-record.usedCount)>0)"
                       @click="apply(record)">报名</a>
                </div>

            </a-table>
            <a-pagination
                    style="margin: 20px;float: right"
                    v-model="pageMap.current"
                    :page-size-options="pageSizeOptions"
                    :total="pageMap.total"
                    show-size-changer
                    :page-size="pageMap.pageSize"
                    @change="pageChange"
                    @showSizeChange="onShowSizeChange"
            >
                <template slot="buildOptionText" slot-scope="props">
                    <span>{{ props.value }}条/页</span>
                </template>
            </a-pagination>
        </div>

    </div>
</template>

<script>
    import scheduleApi from "../../../api/remarketing/scheduleApi";
    import activityApi from "../../../api/remarketing/activityApi";
    import moment from 'moment'
    import {getUrlParam} from "../../../utils/urlUtils";

    const columns = [
        {title: '排期id', dataIndex: 'id', key: 'id', width: 80, fixed: 'left',},
        {title: '活动名', width: 150, dataIndex: 'activityName', key: ''},
        {title: '开始时间', dataIndex: 'startTime', key: '', width: 180, scopedSlots: {customRender: "startTime"}},
        {title: '结束时间', dataIndex: 'endTime', key: '', width: 180, scopedSlots: {customRender: "endTime"}},
        {title: '总坑位', width: 150, dataIndex: 'maxCount', key: ''},
        {title: '已占用坑位', width: 150, dataIndex: 'usedCount', key: ''},
        {title: '剩余坑位', width: 150, dataIndex: '', key: '', scopedSlots: {customRender: "count"}},
        {title: '状态', dataIndex: 'enabled', width: 60, key: '', scopedSlots: {customRender: "status"}},

        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 150,
            scopedSlots: {customRender: 'action'},
        },
    ];
    export default {
        name: "scheduleIndex",
        data() {

            return {
                searchForm: this.$form.createForm(this, {name: 'advanced_search'}),
                //搜索
                searchMap: {
                    activityId: undefined
                },
                //表格
                columns,
                tableData: [],
                activityData: [],
                //分页
                pageSizeOptions: ['10', '20', '30', '50', '100'],
                pageMap: {
                    current: 1,
                    pageSize: 10,
                    total: 0
                },




            };
        },
        created() {
            let urlParam = getUrlParam();
            if (urlParam && urlParam.id) {
                this.searchMap.activityId = urlParam.id
                this.loadActivityList();
                this.loadData()
            }

        },
        methods: {
            moment,
            loadData() {
                scheduleApi.list(this.searchMap, this.pageMap.current, this.pageMap.pageSize).then(resp => {
                    if (resp.data.flag) {
                        this.tableData = resp.data.data.rows;
                        this.pageMap.total = resp.data.data.total
                    }
                })
            },


            /**
             * 每页大小改变的回调
             * */
            onShowSizeChange(current, pageSize) {
                this.pageMap.current = current;
                this.pageMap.pageSize = pageSize;
                this.loadData();
            },
            pageChange(value) {
                this.pageMap.current = value;
                this.loadData()
            },
            /**
             * 加载全部活动的列表
             */
            loadActivityList() {
                activityApi.list().then(resp => {
                    if (resp.data.flag) {
                        this.activityData = resp.data.data
                    }
                })
            },
            /**
             * 报名秒杀
             * @param record
             */
            apply(record){
                console.log(record)
                this.$router.push(`/cell-center/killApply?ac=${this.searchMap.activityId}&schId=${record.id}`)
            }
        }
    }
</script>

<style scoped>

</style>